import { Appearance } from "react-native";
import { ThemeMode } from "@/contexts/ThemeContext";
import { lightTheme, darkTheme } from "./theme.style";

// 公共路由header样式配置
// 创建一个函数，根据主题返回对应的样式
const getHeaderStyle = (themeMode: ThemeMode) => {
  let effectiveTheme: "light" | "dark" = themeMode as "light" | "dark";

  // 如果是system模式，检测系统主题
  if (themeMode === "system") {
    const colorScheme = Appearance.getColorScheme();
    effectiveTheme = colorScheme === "dark" ? "dark" : "light";
  }

  const isDark = effectiveTheme === "dark";

  // 获取当前主题的颜色
  const colors = isDark ? darkTheme : lightTheme;

  return {
    headerShown: true, // 配置是否展示header
    headerTitleAlign: "center",
    headerTintColor: colors.text.primary, // 头部返回按钮颜色
    headerStyle: {
      backgroundColor: colors.background, // 头部背景色
      borderBottomColor: colors.border.light, // 头部底部边框颜色
    },
    headerTitleStyle: {
      color: colors.text.primary, // 头部标题颜色
      fontSize: 18, // 头部标题字体大小
      fontWeight: "600" as any, // 头部标题字体粗细，使用字符串类型避免类型错误
    },
  };
};
// 默认使用浅色模式的样式（向后兼容）
const headerStyleSheet = getHeaderStyle("light");
// 导出默认样式和获取样式的函数
export default headerStyleSheet;
export { getHeaderStyle };
